<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- <form action="" method="post" enctype="multipart/form-data">
			
			<input type="submit" value=""/>
		</form> -->
		
		
		用户名：<input type="text" class="username" /><br>
		图像：<input type="file" class="myimg"  /><br>
		<button class="btn">提交</button>
		<script type="text/javascript">
				var btnEle = document.querySelector(".btn");
				var usernameEle = document.querySelector(".username");
				var myimgEle = document.querySelector(".myimg");
				btnEle.onclick = function(){
					// 1.js里获取文件对象
					var username = usernameEle.value;
					var myimg = myimgEle.files[0];
					// console.log(username,myimg);
					var form = new FormData();
					form.append("username",username);
					form.append("myimg",myimg);
					// ajax上传文件  1. 必须是post方法 2.借助于formdata对象 3.不需要设置请求头部
					var xhr = new XMLHttpRequest();
					xhr.open("POST","file.php",true);
					xhr.onload = function(){
						console.log(xhr.responseText);
					}
					xhr.send(form);
					
					
					
					
				}
		</script>
	</body>
</html>
